<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加账号</span>
      </div>

      <div class="formAddBox">
        <el-form
          ref="form"
          :model="accountAddForm"
          :rules="rules"
          label-width="80px"
          size="small"
        >
          <el-form-item label="账号" prop="account">
            <el-input v-model="accountAddForm.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="accountAddForm.password"></el-input>
          </el-form-item>
          <el-form-item label="用户组" prop="userGroup">
            <el-select
              placeholder="请选择活动区域"
              v-model="accountAddForm.userGroup"
            >
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="普通用户" value="普通用户"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="addSubmit">添加</el-button>
            <el-button @click="resetSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $_repeat, $_user_add } from "@/api/user";
export default {
  data() {
    var checkAccountRepeat = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入账号"));
      } else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
        callback(new Error("4到16位（字母，数字，下划线，减号）"));
      } else {
        // 发送请求查看这个账号是否被注册过
        $_repeat({
          account: value,
        }).then((res) => {
          if (res.data.code == 201) {
            callback(new Error("当前账号已存在"));
          } else {
            callback();
          }
        });
      }
    };
    var checkPassword = (rule, value, callback) => {
      if (value == "") {
        // 如果填入的值为空，那么提示
        callback(new Error("请输入密码"));
      } else if (!/^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/.test(value)) {
        // 密码有值，但是不符合公司的密码规则
        callback(
          new Error("密码必须由字母、数字组成，区分大小写,密码长度为8-18位")
        );
      } else {
        // 如果通过规则，那么执行回调
        callback();
      }
    };
    return {
      accountAddForm: {
        account: "",
        password: "",
        userGroup: "",
      },
      rules: {
        account: [
          {
            required: true,
            // 代表的是自定义规则验证
            validator: checkAccountRepeat,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            // 代表的是自定义规则验证
            validator: checkPassword,
            trigger: "blur",
          },
        ],
        userGroup: [
          { required: true, message: "请选择账号类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    addSubmit() {
      // 获取到添加账号的数据
      console.log(this.accountAddForm);
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log("发送添加账号的请求");
          $_user_add(this.accountAddForm).then((res) => {
            console.log(115, res);
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: res.data.msg,
              });
              // 添加完成账号之后，跳转到账号列表界面
              this.$router.push("/Account/AccoutList");
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          });
        }
      });
    },
    resetSubmit() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.formAddBox {
  .el-input {
    width: 200px;
  }
}
</style>